<template>
    <a-calendar v-model:value="value">
        <template #headerRender="{ value: current, onChange }">
            <div class="cal_header">
                <a-alert :message="topMessage" type="success" show-icon class="cal_alert" />
                <a-date-picker :value="current" picker="month" size="large" @change="($event: Date) => {
                    datePockerChange($event, onChange)
                }" />
            </div>
        </template>
        <template #dateCellRender="{ current }">
            <ul class="events">
                <li v-for="item in getListData(current)" :key="item.id">
                    <a-badge :status="item.acountType == 1 ? 'error' : 'success'"
                        :text="item.remask != '' ? item.remask : '无备注'" />

                </li>
            </ul>
        </template>
    </a-calendar>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { useMicroGlobalData } from '@/stores/microGlobalData';
import type { Accounts } from './type.d.ts'

const store = useMicroGlobalData();
const value = ref<Dayjs>();
// 记录的是当前选择的年月
const currentDateMonth = ref(dayjs().format("YYYY-MM"));

const topMessage = computed(() => {
    return `
    本月记录次数${AccountInfo.value.length}次
    `
})

const datePockerChange = (date: Date, cb: (date: Date) => void) => {
    currentDateMonth.value = dayjs(date).format("YYYY-MM");
    getMomentDate();
    cb && cb(date)
}
const AccountInfo = ref<Accounts[]>([]);
// 获取这个月份的数据
const getMomentDate = async () => {
    // 这个月开始时间戳 和 结束时间戳  比如：2023-10-01 00:00:00 ~ 2023-10-31 23:59:59
    const start = dayjs(`${currentDateMonth.value}-01`).valueOf();
    const end = dayjs(`${currentDateMonth.value}-01`).endOf('month').valueOf();
    console.log("🚀 ~ getMomentDate ~ start:", start, end)
    const params = {
        startDate: start,
        endDate: end
    }
    const res = await store.microGlobalData.axiosInstance?.get<typeof params, Accounts[]>({ url: "/account/punches", _params: params }, true)
    console.log("🚀 ~ getMomentDate ~ res:", res)
    AccountInfo.value = res || [];
}

const getListData = (value: Dayjs) => {
    // 获取这天的年月日
    const date = value.format("YYYY-MM-DD");
    // 时间戳
    const timestamp = dayjs(date).valueOf();
    console.log("🚀 ~ getListData ~ date:", date, timestamp)
    return filterTodayData(timestamp);
};
// 筛选出当天的数据
const filterTodayData = (timestamp: number) => {
    const todayData = AccountInfo.value.filter(item => {
        return item.createdDate === (timestamp.toString());
    })
    return todayData || [];
}
onMounted(() => {
    getMomentDate()
})
</script>

<style lang="scss" scoped>
.cal_header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;

    .cal_alert {
        flex: 1;
        margin-right: 10px;

    }
}
</style>